<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Highcharts 数组数据折线图</title>
    <!-- 引入 Highcharts 库 -->
    <script src="/static/js/highcharts.js"></script>
</head>

<body>
    <!-- 定义一个 DOM 容器用于显示图表 -->
    <div id="container" style="width: 1000px;height:800px;"></div>
    <script>
         // 封装生成图表的代码为一个函数
         function updateChart() {
            // 从 JSON 文件中加载数据
            fetch('data.json')
              .then(response => response.json())
              .then(data => {
                    // 使用 time_part 作为 x 轴数据
                    const x = data.time_part;

                    // 定义图表配置
                    Highcharts.chart('container', {
                        // 设置 credits 选项为 false 以隐藏版权信息
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: '数组数据折线图'
                        },
                        xAxis: {
                            title: {
                                text: '时间'  // 修改 x 轴标题为时间
                            },
                            categories: x
                        },
                        yAxis: {
                            title: {
                                text: '数值'
                            }
                        },
                        series: [                           
                            {
                                name: '预测值线1',
                                type: 'line',
                                data: data.yuce_part.map((row, i) => row[0] + data.C_list[i]),
                                color: '#8C8C00',
                                //lineWidth: 1,
                                dashStyle: 'ShortDashDotDot'
                            },
                            {
                                name: '预测值线2',
                                type: 'line',
                                data: data.yuce_part.map((row, i) => row[1] + data.C_list[i]),
                                color: '#9AFF02',
                                //lineWidth: 1,
                               dashStyle: 'ShortDash'
                            },
                            {
                                name: '实际值线1',
                                type: 'line',
                                data: data.shiji_list.map((row, i) => row[0] + data.C_list[i]),
                                color: 'blue',
                                lineWidth: 4,
                                dashStyle: 'dot'
                            },
                            {
                                name: '实际值线2',
                                type: 'line',
                                data: data.shiji_list.map((row, i) => row[1] + data.C_list[i]),
                                color: 'black',
                                lineWidth: 4,
                                dashStyle: 'dash'
                            },/*
                            {
                                name: '修正线1',
                                type: 'line',
                                data: data.XZ_list.map((row, i) => row[0] + data.C_list[i]),
                                color: 'green'
                            },
                            {
                                name: '修正线2',
                                type: 'line',
                                data: data.XZ_list.map((row, i) => row[1] + data.C_list[i]),
                                color: 'red'
                            },*/
                            {
                                name: '基准线，即实际值',
                                type: 'line',
                                data: data.C_list,
                                color: 'purple',
                                lineWidth: 3
                            }
                        ]
                    });
                })
              .catch(error => console.error('Error loading data:', error));
        }

        // 首次加载时生成图表
        updateChart();
        // 每隔 n毫秒调用一次 updateChart 函数
        setInterval(updateChart, 60000);
    </script>
</body>

</html>